<!-- 危化品车进出记录 -->
<template>
  <div class="dy-panel">
    <div class="dy-panel-main">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
      <div class="dy-panel-content">
        <contentTitle :title="'节假日车流分析'"/>
        <div class="yz-common-small-title">
          <div class="yz-common-title-navs">
            <div :class="['yz-common-title-nav',{'selected':item.selected}]" data-level="2" v-for="(item,index) in jjrclfx_navs" @click="jjrcfxClick(index)">
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
        <div class="layChart" ref="jjrclfxRef"></div>
       </div>
      <div class="pd_abItems-contain">
        <div class="pd_abItems-main">
          <div v-for="(item,index) in abItems" :class="{'pd_abItem-item':true,'selected':item.clazz === 'selected'}" @click="abItemsClick(item)">{{item.title}}</div>
        </div>
        <el-date-picker
            v-model="jjrclfx_legend[1]"
            type="year"
            placeholder="选择年份"
            :disabled-date="disabledDate"
        >
        </el-date-picker>
        <el-date-picker
            v-model="jjrclfx_legend[0]"
            type="year"
            placeholder="对比年份"
            :disabled-date="disabledDate"
        >
        </el-date-picker>
        <div class="pd-abItem-search">
          <button class="pd-abItem-search-btn" @click="search">查询</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import ContentTitle from "../contentTitle.vue";
import {drawLine} from "../../../util/chartUtil.js";
import {ajaxRequest} from "../../../api/code.js";

const emit = defineEmits(['closeChild']);
const closeCurrent = function (){
  emit('closeChild')
}

// 禁用明年及以后的日期 以及 2024以前没数据
const disabledDate = (time) => {
  return time.getFullYear() > new Date().getFullYear() || time.getFullYear() < 2024; // 禁用明年及以后的日期 以及 2024以前的
};

const areacode = ref(null)
const abItems = ref([{title:'综合',clazz:'selected'},{title:'东(南)',clazz:''},{title:'西(北)',clazz:''}])
const abItemsClick = function (item){
  abItems.value.forEach((res,i)=>{
    res.clazz = res.title === item.title?'selected':"";
  })
  if(item.title === '综合'){
    areacode.value = null
  }
  else if(item.title === '东(南)'){
    areacode.value = "01"
  }
  else if(item.title === '西(北)'){
    areacode.value = "02"
  }
}

const search = function (){
  jjrclfx_navs.value.forEach((row,index)=>{
    if(row.selected){
      //刷新数据
      getJjrclfx(row.holidaytypeid)
      return
    }
  });
  

}

const currentYear = new Date().getFullYear();
// 计算去年和今年的年份
const lastYear = currentYear - 1;
const thisYear = currentYear;
const jjrclfx_legend = ref([`${lastYear}`, `${thisYear}`]);
const jjrclfx_x = ref(['1天', '2天', '3天', '4天', '5天', '6天', '7天'])
const jjrclfx_y_1 = ref([])
const jjrclfx_y_2 = ref([])
const jjrclfx_navs = ref([{name:'元旦',holidaytypeid:'',selected:false},{name:'春节',holidaytypeid:'',selected:true},{name:'清明',holidaytypeid:'',selected:false}
])
const jjrcfxClick = function (selectIndex){
  jjrclfx_navs.value.forEach((row,index)=>{
    row.selected = (index === selectIndex);
  });
  //刷新数据
  getJjrclfx(jjrclfx_navs.value[selectIndex].holidaytypeid)
}


const jjrclfxRef = ref();
const jjrclfxOpt = ref({
  color: ['#5AFFFA', '#F44538'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: jjrclfx_legend,
    right: '3%',
    top: '8%',
    textStyle:{
      color: '#FFFFFF'
    },
    icon:'rect',
    itemWidth: 18,
    itemHeight: 6
  },
  grid: {
    top: '35%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: jjrclfx_x.value,
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      axisLabel: {
        interval:0,
        textStyle: {
          color: 'white',
          fontSize: 12
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: "辆",
      nameTextStyle: {
        color: "#FFF",
        nameLocation: "end",
        padding:[0,0,0,-15]
      },
      axisLabel: {
        textStyle: {
          color: 'white'
        }
      },
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(127, 127, 127, 1)',
          type: 'dashed',
        }
      },
    }
  ],
  series: [
    {
      name: jjrclfx_legend.value[0],
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 4
      },
      showSymbol: false,
      emphasis: {
        focus: 'series'
      },
      data: jjrclfx_y_1.value
    },
    {
      name: jjrclfx_legend.value[1],
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 4
      },
      showSymbol: false,
      emphasis: {
        focus: 'series'
      },
      data: jjrclfx_y_2.value
    }
  ]
});

let jjrclfxChart;

onMounted(()=>{
  jjrclfxChart = drawLine(jjrclfxRef.value, jjrclfxOpt.value);
  refreshData()
})

/**
 * 节假日车流分析
 */
 async function refreshData() {
  //1.查询节假日信息
  const result = await ajaxRequest('post', 'getParkingHolidays', {year:jjrclfx_legend.value[1]})
  if (result.data && result.data.length>0) {
    result.data.forEach((item,index)=>{
      jjrclfx_navs.value[index] = {
        name:item.express,
        holidaytypeid:item.holidaytypeid,
        //默认查询第一个节日数据
        selected:index===0
      }
      //默认查询第一个节日数据
      if(index === 0){
        //根据节假日查询车流
        getJjrclfx(item.holidaytypeid)
      }
    })
  }
}

/**
 * 根据节假日查询车流
 */
async function getJjrclfx(holidaytypeid) {
  let dbnf,xznf
  if (jjrclfx_legend.value[0] instanceof Date) {
    dbnf = jjrclfx_legend.value[0].toLocaleString().substring(0,4)
  }
  else {
    dbnf = jjrclfx_legend.value[0].substring(0,4)
  }
  if (jjrclfx_legend.value[1] instanceof Date) {
    xznf = jjrclfx_legend.value[1].toLocaleString().substring(0,4)
  }
  else {
    xznf = jjrclfx_legend.value[1].substring(0,4)
  }
  jjrclfx_legend.value[0] = dbnf
  jjrclfx_legend.value[1] = xznf
  const params = {
    xznf : xznf,
    dbnf : dbnf,
    areacode: areacode.value,
    holidaytypeid : holidaytypeid
  }
  jjrclfx_x.value = []
  jjrclfx_y_1.value = []
  jjrclfx_y_2.value = []
  const res = await ajaxRequest('post', 'getParkingJjrclfx', params)
  if (res.data) {
    if(res.data.thisyear && res.data.thisyear.length>0){
      res.data.thisyear.forEach((item,index)=>{
        jjrclfx_x.value[index] = item.ts
        jjrclfx_y_2.value[index] = item.cnt
      })
    }
    if(res.data.lastyear && res.data.lastyear.length>0){
      res.data.lastyear.forEach((item,index)=>{
        jjrclfx_x.value[index] = item.ts
        jjrclfx_y_1.value[index] = item.cnt
      })
    }
  }
  jjrclfxOpt.value.legend.data = jjrclfx_legend.value
  jjrclfxOpt.value.xAxis[0].data = jjrclfx_x.value
  jjrclfxOpt.value.series[0].name = jjrclfx_legend.value[0]
  jjrclfxOpt.value.series[0].data = jjrclfx_y_1.value
  jjrclfxOpt.value.series[1].name = jjrclfx_legend.value[1]
  jjrclfxOpt.value.series[1].data = jjrclfx_y_2.value
  jjrclfxChart.setOption(jjrclfxOpt.value)
}

</script>

<style scoped>
.dy-panel{
  position: fixed;
  top: 10vh;
  width: 100%;
  .dy-panel-main{
    background: rgba(5, 36, 44, 0.9);
    width: 80vh;
    min-height: 50vh;
    margin: 0 auto;
    padding-right: 2.5vh;
    padding-bottom: 2.5vh;
    position: relative;
    .dy-panel-header{
      height: 3vh;
      .dy-panel-close{
        position: absolute;
        height: 2.6vh;
        width: 2.6vh;
        background-image: url("../../../assets/img/public/关闭.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        right: 1vh;
        top: 2vh;
        cursor: pointer;
      }
    }
    .dy-panel-content{
      display: flex;
      padding: 2vh;
      flex-wrap: wrap;
    }
  }
}
.pd_abItems-contain{
  display: flex;
  justify-content: center;
  margin-top: 1vh;
  .pd_abItems-main{
    display: flex;
    border: 1px solid #FFFFFF;
    margin-right: 2vh;
    .pd_abItem-item{
      padding: 0.5vh 1.2vh;
      border-right: 1px solid #FFFFFF;
      cursor: pointer;
      font-size: 1.4vh;
    }
    .selected{
      background: #35CB9C;
      border: 1px solid #35CB9C;
    }
  }
  .pd-abItem-search{
    margin-left: 1vh;
    .pd-abItem-search-btn{
      border: none;
      background: #35CB9C;
      padding: 0.5vh 1.2vh;
      color: #FFFFFF;
      cursor: pointer;
    }
  }
}

.yz-common-title-navs {
  display: flex;
  position: absolute;
  font-size: 12px;
  right: 1.4vh;
  top: 4.5vh;
  z-index: 1000;
  .yz-common-title-nav {
    color: #ffffff;
    padding: 0 5px;
    cursor: pointer;
    font-style: normal;
    border-right: 1px solid #ffffff;

  }
  .yz-common-title-nav:last-of-type {
    border-right: none;
  }
  .yz-common-title-nav.selected {
    span{
      border-bottom: 2px solid #3DBDC8;
    }
  }
}
.yz-common-small-title{
  position: absolute;
  top: 10vh;
  right: 5vh;
  width: 100%;
}


:deep(.el-input__wrapper){
  background-color: transparent !important;
  color: #FFFFFF !important;
  height: 3vh;
  flex-grow: 0.5 !important;
  width: 100px;
}
:deep(.el-date-editor .el-range-input){
  color: #FFFFFF !important;
}
:deep(.el-date-editor .el-range-separator){
  color: #FFFFFF !important;
}
:deep(.el-date-editor){
  width: auto;
  height: auto;
}
</style>
